
<h1>mat-list demo</h1>

<button mat-raised-button (click)="thirdLine=!thirdLine">Show third line</button>

<div class="demo-list">
  <div>
    <h2>Normal lists</h2>

    <mat-list>
      <div mat-subheader>Items</div>
      <mat-list-item *ngFor="let item of items">
        {{item}}
      </mat-list-item>
    </mat-list>

    <mat-list>
      <mat-list-item *ngFor="let contact of contacts">
        <div mat-line>{{contact.name}}</div>
        <div mat-line *ngIf="thirdLine">extra line</div>
        <div mat-line>{{contact.headline}}</div>
      </mat-list-item>
    </mat-list>

    <mat-list>
      <div mat-subheader>Today</div>
      <mat-list-item *ngFor="let message of messages; last as last">
        <img mat-list-avatar [src]="message.image" alt="Image of {{message.from}}">
        <div mat-line>{{message.from}}</div>
        <div mat-line>
          <span>{{message.subject}} -- </span>
          <span>{{message.message}}</span>
        </div>
        <mat-divider inset *ngIf="!last"></mat-divider>
      </mat-list-item>
      <mat-divider></mat-divider>
      <mat-list-item *ngFor="let message of messages">
        <div mat-line>{{message.from}}</div>
        <div mat-line>{{message.subject}}</div>
        <div mat-line>{{message.message}}</div>
      </mat-list-item>
    </mat-list>

    <mat-list>
      <mat-list-item *ngFor="let link of links">
        <span mat-line>{{ link.name }}</span>
        <button mat-icon-button (click)="infoClicked=!infoClicked">
          <mat-icon>info</mat-icon>
        </button>
      </mat-list-item>
    </mat-list>
  </div>

  <div>
    <h2>Dense lists</h2>
    <mat-list dense>
      <div mat-subheader>Items</div>
      <mat-list-item *ngFor="let item of items">
        {{item}}
      </mat-list-item>
    </mat-list>

    <mat-list dense>
      <mat-list-item *ngFor="let contact of contacts">
        <div mat-line>{{contact.name}}</div>
        <div mat-line>{{contact.headline}}</div>
      </mat-list-item>
    </mat-list>

    <mat-list dense>
      <div mat-subheader>Today</div>
      <mat-list-item *ngFor="let message of messages">
        <img mat-list-avatar [src]="message.image" alt="Image of {{message.from}}">
        <div mat-line>{{message.from}}</div>
        <div mat-line>{{message.subject}}</div>
        <div mat-line>{{message.message}}</div>
      </mat-list-item>
    </mat-list>

    <mat-list dense>
      <mat-list-item *ngFor="let link of links">
        <span mat-line>{{ link.name }}</span>
        <button mat-icon-button (click)="infoClicked=!infoClicked">
          <mat-icon class="material-icons">info</mat-icon>
        </button>
      </mat-list-item>
    </mat-list>
  </div>
  <div>
    <h2>Nav lists</h2>
    <mat-nav-list>
      <a mat-list-item *ngFor="let link of links" href="http://www.google.com">
        {{ link.name }}
      </a>
    </mat-nav-list>
    <div *ngIf="infoClicked">
      More info!
    </div>
    <mat-nav-list>
      <a mat-list-item *ngFor="let link of links; last as last" href="http://www.google.com">
        <mat-icon mat-list-icon>folder</mat-icon>
        <span mat-line>{{ link.name }}</span>
      </a>
    </mat-nav-list>
  </div>

  <div>
    <h2>Action list</h2>
    <mat-action-list>
      <button mat-list-item *ngFor="let link of links" (click)="alertItem(link.name)">
        {{link.name}}
      </button>
    </mat-action-list>
  </div>

  <div>
    <h2>Selection list</h2>

    <mat-selection-list #groceries [ngModel]="selectedOptions"
                        (ngModelChange)="onSelectedOptionsChange($event)"
                        (selectionChange)="changeEventCount = changeEventCount + 1"
                        [disabled]="selectionListDisabled"
                        [disableRipple]="selectionListRippleDisabled"
                        color="primary">
      <div mat-subheader>Groceries</div>

      <mat-list-option value="bananas" checkboxPosition="before">Bananas</mat-list-option>
      <mat-list-option selected value="oranges">Oranges</mat-list-option>
      <mat-list-option value="apples" color="accent">Apples</mat-list-option>
      <mat-list-option value="strawberries" color="warn">Strawberries</mat-list-option>
    </mat-selection-list>

    <mat-selection-list [disableRipple]="selectionListRippleDisabled">
      <div mat-subheader>Dogs</div>

      <mat-list-option checkboxPosition="before">
        <img matListAvatar src="https://material.angular.io/assets/img/examples/shiba1.jpg">
        <span matLine>Shiba Inu</span>
      </mat-list-option>

      <mat-list-option checkboxPosition="after">
        <img matListAvatar src="https://material.angular.io/assets/img/examples/shiba2.jpg">
        <span matLine>Other Shiba Inu</span>
      </mat-list-option>
    </mat-selection-list>

    <p>Selected: {{selectedOptions | json}}</p>
    <p>Change Event Count {{changeEventCount}}</p>
    <p>Model Change Event Count {{modelChangeEventCount}}</p>
    <p>
      <label>
        Disable selection list
        <input type="checkbox" [(ngModel)]="selectionListDisabled">
      </label>
    </p>
    <p>
      <label>
        Disable Selection List ripples
        <input type="checkbox" [(ngModel)]="selectionListRippleDisabled">
      </label>
    </p>
    <p>
      <button mat-raised-button (click)="groceries.selectAll()">Select all</button>
      <button mat-raised-button (click)="groceries.deselectAll()">Deselect all</button>
    </p>
  </div>

  <div>
    <h2>Single Selection list</h2>

    <mat-selection-list #favorite
                        [(ngModel)]="favoriteOptions"
                        [multiple]="false"
                        color="primary">
      <div mat-subheader>Favorite Grocery</div>

      <mat-list-option value="bananas">Bananas</mat-list-option>
      <mat-list-option selected value="oranges">Oranges</mat-list-option>
      <mat-list-option value="apples">Apples</mat-list-option>
      <mat-list-option value="strawberries" color="warn">Strawberries</mat-list-option>
    </mat-selection-list>

    <p>Selected: {{favoriteOptions | json}}</p>
  </div>

  <div>
    <h2>Line alignment</h2>

    <mat-list>
      <mat-list-item *ngFor="let link of links">
        <span mat-line>{{ link.name }}</span>
        <span>Not in an <i>matLine</i></span>
      </mat-list-item>
    </mat-list>

    <mat-selection-list>
      <mat-list-option value="first">First</mat-list-option>
      <mat-list-option value="second">
        <span matLine>Second</span>
        <span>Not in an <i>matLine</i></span>
      </mat-list-option>
    </mat-selection-list>
  </div>

  <div>
    <h2>Icon alignment in selection list</h2>

    <mat-selection-list>
      <mat-list-option value="bananas" [checkboxPosition]="checkboxPosition">
        <mat-icon matListIcon>info</mat-icon>
        Bananas
      </mat-list-option>
      <mat-list-option value="oranges" [checkboxPosition]="checkboxPosition">
        <mat-icon matListIcon #ok>info</mat-icon>
        Oranges
      </mat-list-option>
      <mat-list-option value="cake" [checkboxPosition]="checkboxPosition">
        <mat-icon matListIcon>info</mat-icon>
        Cake
      </mat-list-option>
      <mat-list-option value="fries" [checkboxPosition]="checkboxPosition">
        <mat-icon matListIcon>info</mat-icon>
        Fries
      </mat-list-option>
    </mat-selection-list>

    <button mat-raised-button (click)="toggleCheckboxPosition()">
      Toggle checkbox position
    </button>
  </div>
</div>
